import { IconService } from '../lib/icons'
import { ICON_IDS } from '../lib/icons/types/constants'
import { PageHandler } from '../lib/page_handler'
import { BUILD_CONFIG, PROJECT_PREFIX } from '../types/constants'
import { SYMBOLS } from '../types/interfaces'

export class DonateManager {
  private static instance: DonateManager
  private readonly pageHandler: PageHandler = PageHandler.getInstance()
  private readonly iconService: IconService = IconService.getInstance()
  private readonly enableElectricStyles: boolean

  constructor() {
    this.enableElectricStyles = true
  }

  /**
   * 获取单例实例
   */
  public static getInstance(): DonateManager {
    if (!DonateManager.instance) {
      DonateManager.instance = new DonateManager()
    }
    return DonateManager.instance
  }

  /**
   * 显示反馈对话框
   */
  public async showDialog(): Promise<void> {
    await this.pageHandler.ui.toast.confirm({
      title: '非常感谢您的支持！',
      html: `
        <div class="donate-container">
          <div class="donate-emoji">🙌✨🙏</div>
          <p class="donate-title">现在，你正在使用 ${BUILD_CONFIG.PROJECT_NAME} ，这就是这一趟旅途的成果！</p>
          <p class="donate-subtitle">如果你觉得它对你有帮助，我诚恳地希望你能考虑：</p>
          
          <div class="donate-options">
            <div class="donate-option donate-support">
              <div class="donate-icon">💰</div>
              <div class="donate-label">捐赠支持</div>
              <div class="emoji-trail"></div>
            </div>
            <div class="donate-option donate-star" onclick="window.open('${BUILD_CONFIG.URL.REPO_URL}', '_blank', 'noopener,noreferrer')">
              <div class="donate-icon">⭐</div>
              <div class="donate-label">给个Star</div>
            </div>
            <div class="donate-option donate-feedback" onclick="window.open('${BUILD_CONFIG.URL.FEED_BACK_URL}', '_blank', 'noopener,noreferrer')">
              <div class="donate-icon">💬</div>
              <div class="donate-label">分享反馈</div>
            </div>
          </div>
          
          <p class="donate-footer">每一份支持都是继续开发的动力！<br>你的贡献将帮助 ${BUILD_CONFIG.PROJECT_NAME} 持续发展和改进。</p>
        </div>
      `,
      imageUrl: this.iconService.api.icon.asDataUrl(ICON_IDS.metadata.logo),
      imageHeight: 100,
      confirmButtonText: '我已支持',
      cancelButtonText: '下次一定',
      didOpen: () => {
        const $image = $('.swal2-popup .swal2-image')
        const $donateSupport = $('.donate-support')
        $donateSupport.on('mouseenter', () => {
          $image.attr('src', this.iconService.api.icon.asDataUrl(ICON_IDS.development.donate))
        })
        $donateSupport.on('mouseleave', () => {
          $image.attr('src', this.iconService.api.icon.asDataUrl(ICON_IDS.metadata.logo))
        })
      },
      preConfirm: async () => {
        await this.showThankYouPopup()
        return true
      },
    })
  }

  /**
   * 显示感谢弹窗
   */
  private async showThankYouPopup(): Promise<void> {
    await this.pageHandler.ui.toast.alert({
      title: `${SYMBOLS.SHAPES.HEART} 衷心感谢您的支持！`,
      html: `
        <div class="thank-you-container">
          <div class="thank-you-emoji">${SYMBOLS.STATUS.CELEBRATION}${SYMBOLS.STATUS.FESTIVITY}${SYMBOLS.STATUS.SPARKLES}</div>
          <p class="thank-you-message">
            您的支持对我来说意义重大！<br>
            这将帮助 ${BUILD_CONFIG.PROJECT_NAME} 持续改进和发展。
          </p>
          <p class="thank-you-footer">
            <small>期待与您共同见证成长 ${SYMBOLS.NATURE.SPROUT}</small>
          </p>
        </div>
      `,
      confirmButtonText: '太棒了',
      timer: 5000,
      timerProgressBar: true,
      customClass: {
        confirmButton: 'btn btn-success',
      },
    })
  }

  /**
   * 电流流动效果
   */
  public electricFlowStyles(): string {
    return `
/* 电流边框 */
.donate-container::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 15px;
  background: linear-gradient(
    45deg,
    #ff00ff,  /* 粉色 */
    #6d5ffd,  /* 紫蓝 */
    #00ffcc,  /* 青绿 */
    #00ccff,  /* 亮蓝 */
    #00ffcc,  /* 青绿 */
    #6d5ffd,  /* 紫蓝 */
    #ff00ff   /* 粉色 */
  );
  background-size: 400%;
  z-index: -1;
  animation: electricFlow 8s linear infinite;
  /* 关键技巧：使用伪元素+遮罩 */
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 2px; /* 控制边框宽度 */
  filter: brightness(1.1) contrast(1.5); /* 增强电流感 */
}

/* 电光闪烁层 */
.donate-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,0,255,0.7),
    rgba(0,255,255,0.7),
    transparent);
  animation: electricFlash 3s cubic-bezier(0.4,0,0.6,1) infinite;
  z-index: -2; /* 置于最底层 */
  opacity: 0;
}
    `
  }

  public supportStyles() {
    return `
.donate-container {
  .donate-support {
    position: relative;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .donate-support:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
    background: linear-gradient(
      135deg, 
      rgba(255,215,0,0.1), 
      rgba(255,255,255,0.2)
    );
  }
  .donate-support:hover .donate-icon {
    animation: moneyJump 0.8s ease infinite;
    position: relative;
    z-index: 2;
  }
  .donate-support:hover .emoji-trail {
    opacity: 1;
  }

  .emoji-trail {
    position: absolute;
    top: 50%;  /* 改为居中 */
    left: 50%;  /* 改为居中 */
    width: 100px;  /* 缩小范围 */
    height: 100px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    transform: translate(-50%, -50%);  /* 居中定位 */
  }
  .emoji-trail::before,
  .emoji-trail::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .emoji-trail::before {
    content: "💸💰💎🤑✨";
    position: absolute;
    font-size: 22px;
    animation: moneyRise  2s ease-out infinite;
  }
  .emoji-trail::after {
    content: "💵🪙💲👑💫";
    position: absolute;
    font-size: 20px;
    animation: moneyRise  2.3s ease-out 0.4s infinite;
  }
}
    `
  }

  public starStyles() {
    return `
      .donate-container {
        .donate-star {
          position: relative;
          transition: all 0.3s ease;
        }
        .donate-star::after {
          content: "";
          position: absolute;
          top: -10px;
          left: 50%;
          width: 30px;
          height: 30px;
          background: radial-gradient(
            circle, 
            rgba(255,255,255,0.8) 0%, 
            rgba(255,255,255,0) 70%
          );
          transform: translateX(-50%);
          opacity: 0;
          transition: opacity 0.3s;
        }
        .donate-star:hover {
          transform: translateY(-3px);
        }
        .donate-star:hover::after {
          opacity: 1;
          animation: starShine 1.5s ease-out infinite;
        }
        .donate-star:hover .donate-icon {
          animation: starPulse 1s ease infinite;
        }
      }
    `
  }

  public feedbackStyles() {
    return `
.donate-container {
  .donate-feedback {
    position: relative;
    transition: all 0.3s ease;
  }
  .donate-feedback::before {
    content: "💬💭🗨️";
    position: absolute;
    bottom: 80%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
  }
  .donate-feedback:hover {
    transform: translateY(-3px);
  }
  .donate-feedback:hover::before {
    opacity: 1;
    animation: bubbleRise 2s ease-out infinite;
  }
  .donate-feedback:hover .donate-icon {
    animation: bubbleFloat 1.2s ease-in-out infinite;
  }
}
    `
  }

  /**
   * 样式
   */
  public styles(): string {
    let style = `/* =============================== 【赞助开发】 =============================== */
    .donate-container {
      all: initial !important;
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      color: #545454 !important;
      padding: 5px;
      box-sizing: border-box !important;
      width: 100% !important;
      /* 表情符号区域 */
      .donate-emoji {
        font-size: 2em;
        margin: 5px 0 !important;
        line-height: 1.5;
        width: 100% !important;
      }
      
      /* 标题样式 */
      .donate-title {
        font-size: 1.1em;
        margin: 0 0 8px 0;
        color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
        font-weight: 600;
      }
      .donate-subtitle {
        font-size: 1em;
        margin: 0 0 20px 0;
        color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
      }
      
      /* 选项容器 */
      .donate-options {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 10px 0;
        gap: 20px;
        /* 单个选项 */
        .donate-option {
          margin: 0 10px;
          padding: 10px;
          text-align: center;
          min-width: 80px;
          cursor: pointer;
          transition: transform 0.2s ease;
          /* 图标样式 */
          .donate-icon {
            font-size: 2em;
            margin-bottom: 5px;
          }
          
          /* 标签样式 */
          .donate-label {
            font-size: 0.9em;
            color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
          }
        }
        .donate-option:hover {
          transform: translateY(-3px);
        }
      }
      /* 页脚文本 */
      .donate-footer {
        font-size: 0.85em;
        color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
        margin: 15px 0 !important;
      }
    }
    .thank-you-container {
      all: initial !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      padding: 15px !important;
      box-sizing: border-box !important;
      
      .thank-you-emoji {
        font-size: 2.5em !important;
        margin: 10px 0 !important;
        line-height: 1.2 !important;
        animation: emojiFloat 2s ease-in-out infinite !important;
      }
      
      .thank-you-message {
        font-size: 1.1em !important;
        margin: 15px 0 !important;
        color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
        line-height: 1.5 !important;
      }
      
      .thank-you-footer {
        font-size: 0.9em !important;
        color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
        margin-top: 20px !important;
      }
    }
    `

    style += this.supportStyles()
    style += this.starStyles()
    style += this.feedbackStyles()
    if (this.enableElectricStyles) {
      style += this.electricFlowStyles()
    }
    return style
  }
}
